/* eslint no-underscore-dangle: 0 */
import React, { PureComponent } from 'react';
import { Table, Pagination, Message, Dialog, Button } from '@alifd/next';
import IceContainer from '@icedesign/container';
import FilterForm from './Filter';
import styles from './index.module.scss';
import MMap from '@/components/mMap';
import request from '../../../../utils/request';
import { host } from '../../../../const';

export default class EnhanceTable extends PureComponent {
    constructor(props) {
        super(props);

        this.state = {
            zoom: 0,
            point: {
                lat: '',
                lng: '',
            },
            visible: false,
            mapTableDataSourece: {
                total: 0,
            },
            query: {
                page: 1,
                pageSize: 10,
            },
        };
        this.refreshTableData();
    }
  onOk = () => {
      this.setState({
          visible: false,
      });
  }
  refreshTableData = () => {
      request({
          method: 'POST',
          url: `${host}/map/query`,
          data: this.state.query,
      }).then((res) => {
          const code = res?.data?.code;
          if (code === 200) {
              const data = res?.data?.data;
              this.setState({
                  mapTableDataSourece: data,
              });
          }
      });
  }

  filterFormChange = (value) => {
      this.state.query.name = value.name;
  }

  filterTable = () => {
      this.state.query.page = 1;
      this.state.query.pageSize = 10;
      this.refreshTableData();
  }

  handlePaginationChange = (value) => {
      this.state.query.page = value;
      this.refreshTableData();
  }

  renderOper = (value, index, record) => {
      let oper1 = null;
      let oper2 = null;
      const url = `${host}/${record.path}`;
      if (Number(record.type) === 1) {
          oper1 = <Button ><a href={url} target="_blank">显示</a></Button>;
      } else {
          oper1 = <Button ><a href="javascript:;" onClick={this.handleShow.bind(this, record)}>显示</a></Button>;
      }
      oper2 = <Button><a href="javascript:;" onClick={this.deleteMap.bind(this, record)}>删除</a></Button>;
      return (
          <div style={{ display: 'flex' }} >
              {oper1} &nbsp;&nbsp;{oper2}
          </div>
      );
  };

  // componentDidMount()
  // {
  //   this.timerID = setInterval(
  //         () => {
  //           this.refreshTableData()
  //         },5000
  //     );
  // }

  // componentWillUnmount(){
  //   clearInterval(this.timerID)
  // }

  handleShow = (record) => {
      this.setState({
          zoom: record.zoom,
          point: {
              lat: record.lat,
              lng: record.lng,
          },
          visible: true,
      });
  }
  deleteMap = (record) => {
      request({
          method: 'DELETE',
          url: `${host}/map/${record.id}`,
      }).then(() => {
          Message.success('删除成功');
          this.refreshTableData();
      });
  }


  render() {
      return (
          <div className="filter-table">
              <IceContainer title="内容筛选">
                  <FilterForm
                      onChange={this.filterFormChange}
                      onSubmit={this.filterTable}
                  />
              </IceContainer>
              <IceContainer>
                  <Table
                      dataSource={this.state.mapTableDataSourece.list}
                      className="basic-table"
                      style={styles.basicTable}
                      hasBorder={false}
                  >
                      <Table.Column
                          title="地图名称"
                          dataIndex="name"
                      />
                      <Table.Column
                          title="地图类型"
                          dataIndex="type"
                          cell={value => (Number(value) === 1 ? '室内地图' : '室外地图')}
                      />
                      <Table.Column
                          title="经度(长度)"
                          dataIndex="lng"
                      />

                      <Table.Column
                          title="纬度(高度)"
                          dataIndex="lat"
                      />
                      <Table.Column
                          title="放大倍数"
                          dataIndex="zoom"
                          cell={(value, index, record) => (Number(record.type) === 1 ? '-  -' : value)}
                      />
                      <Table.Column
                          title="备注"
                          dataIndex="remark"
                      />
                      <Table.Column
                          title="操作"
                          width={200}
                          cell={this.renderOper}
                      />
                  </Table>
                  <div className={styles.paginationWrapper}>
                      <Pagination
                          current={this.state.query.page}
                          onChange={this.handlePaginationChange}
                          total={this.state.mapTableDataSourece.total}
                          pageSize={10}
                      />
                  </div>
              </IceContainer>
              <Dialog
                  title="地图详情"
                  visible={this.state.visible}
                  onOk={this.onOk}
                  onClose={this.onOk}
                  onCancel={this.onOk}

              >
                  <div style={{ width: '800px', height: '600px' }} >
                      <MMap defaultCenter={[this.state.point.lng, this.state.point.lat]} defaultZoom={this.state.zoom} />
                  </div>
              </Dialog>
          </div>
      );
  }
}
